@import "https://fonts.loli.net/css?family=Source+Sans+Pro:100,300,400,600";
@import "https://fonts.loli.net/css?family=Noto+Serif+SC:100,300,400,600";
@import "https://fonts.loli.net/css?family=Noto+Serif+SC:400,700&display=swap&subset=chinese-simplified";

* {
    padding: 0 ;
    margin: 0 ;
}
body {
    width: 100% ;
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
    flex-wrap: wrap;
    background: rgba(0,0,0,0.95) ;
    &::before{
        content:"";
        top: 0 ;
        left: 0 ;
        bottom: 0 ;
        right: 0 ;
        opacity: 0.02 ;
        position: fixed ;
        background: center/cover no-repeat ;
        background-image: url("../img/indexBackground.png");
    }
}

main {
    position: relative ;
    flex: 1 ;
    top:10px ;
    display: flex;
    flex-direction: column;
    justify-content:flex-start;
    align-items: flex-end;
    min-width: 700px ;
    .placeHolder{
        min-height: 50px ;
    }
    .top-container{
        position: relative;
        width: 75% ;
        max-width: 75% ;
        min-height: 150px ;
        max-height: 150px ;
        background-color: rgba(15,20,35,1.0) ;
        box-shadow: 0px 0px 5px black ;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 15px ;
        &::before{
            content:"";
            position: absolute;
            top: -5px ;
            left: 0px ;
            width: 100% ;
            height: 50% ;
            //background-color: rgba(214, 48, 49,1.0) ;
            border-top-left-radius: 15px ;
            border-top-right-radius: 15px ;
            z-index: -2 ;
            //background: url("../img/spr-1.png") no-repeat;
        }
        &::after{
            content:"";
            position: absolute;
            bottom: -55px ;
            width: 750px ;
            height: 70px ;
            left: 50% ;
            margin-left: -375px ;
            //background: url("../img/spr-2.png") no-repeat;
        }
        .time-stamp{
            position: absolute;
            top: -30px ;
            left: 10px ;
            user-select: none;
            white-space:nowrap ;
            #site-time{
                margin-left: 30px ;
                font-size: 0.7em ;
                font-weight: 400 ;
                letter-spacing: 1.5px ;
                color: rgba(9, 132, 227,0.5) ;
            }
            span {
                position: relative ;
                color: rgba(0, 184, 148,1.0) ;
                text-shadow: 0 0 10px rgba(0, 184, 148,0.5) ,
                             0 0 30px rgba(0, 184, 148,0.5) ;
            }
        }
        .type-box{
            position: relative;
            width: auto;
            height: auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            #hitokoto-text{
                position: relative;
                width: 0 ;
                padding: 0 ;
                padding-bottom:20px ;
                overflow: hidden;
                line-height: 40px ;
                text-align: center ;
                font-weight: 700 ;
                font-size: 20px ;
                letter-spacing: 1.7px ;
                white-space:nowrap;
                color: #00cec9 ;
                -webkit-animation: typer 4s steps(36, end) forwards;
                animation: typer 4s steps(36, end) forwards;
                animation-delay: 1.5s ;
                font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif;
            }
            .bottom-blink{
                width: 15px ;
                margin-bottom: -2px ;
                margin-left: 2px ;
                background: #55efc4 ;
                border-bottom: solid 2px black ;
                animation :typeBlink 500ms steps(44) infinite normal ;
            }
        }
        #hitokoto-info{
            position: absolute;
            bottom: 10px ;
            right: 10px ;
            letter-spacing: 1.5px ;
            color: rgba(129, 236, 236,0.6) ;
            font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif;
        }
        .fun-btn-1{
            position: absolute;
            box-sizing: border-box; 
            width: 30px ;
            height: 30px ;
            background-color: rgba(186,204,217,0.5) ;
            left: -15px ;
            top: 20px ;
            -webkit-box-shadow: 0px 0px 5px #353b48;
            box-shadow: 0px 0px 5px #353b48;
            transition: 0.3s ;
            cursor: pointer;
            border-radius: 5px ;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            color: #0f1423;
            text-decoration: none;
            .iconfont {
                position: relative;
                font-size: 20px ;
                box-sizing: border-box;
            }
            &:hover {
                background-color: rgba(223, 230, 233,1.0) ;
                transform: rotateZ(90deg) ;
            }
        }
        .fun-btn-2{
            position: absolute;
            width: 30px ;
            height: 30px ;
            background-color: rgba(186,204,217,1.0) ;
            left: -15px ;
            bottom: 20px ;
            -webkit-box-shadow: 0px 0px 5px #353b48;
            box-shadow: 0px 0px 5px #353b48;
            transition: 0.3s;
            cursor: pointer;
            text-align: center; 
            line-height: 30px ;
            border-radius: 5px ;
            .iconfont{
                transition: 0.3s; 
            }
            &::before {
                content: "";
                box-sizing: border-box;
                position: absolute;
                border: solid 2px #fab1a0;
                width: 150%;
                height: 150%;
                left: 50%;
                margin-left: -75%;
                top: 50%;
                margin-top: -75%;
                transition: 0.3s;
                transform: scale(0);
                transform-origin: 50% 50%;
                -webkit-box-shadow: 0px 0px 7px #535c68;
                -moz-box-shadow: 0px 0px 7px #535c68;
                box-shadow: 0px 0px 7px #535c68;
                z-index: -1 ;
            }
            &::after {
                content: "";
                box-sizing: border-box;
                position: absolute;
                border: solid 1px #ff7675;
                width: 170%;
                height: 170%;
                left: 50%;
                margin-left: -85%;
                top: 50%;
                margin-top: -85%;
                transition: 0.3s;
                transform: scale(0);
                transform-origin: 50% 50%;
                -webkit-box-shadow: 0px 0px 7px #535c68;
                -moz-box-shadow: 0px 0px 7px #535c68;
                box-shadow: 0px 0px 7px #535c68;    
                z-index: -1 ;
            }
            &:hover{
                opacity: 0.9 ;
                transform: rotateZ(45deg);
                background-image: linear-gradient(150deg,#ff7675,#fab1a0,#81ecec,#18dcff,) ;
                background-size: 300%;
                animation: bgAnimation 5s infinite ;
            }
            &:hover .iconfont{
                color: white ;
                font-size: 30px ;
            }
            &:hover::before{
                transform: scale(1) ;
                animation: btnRote1 2s infinite ;
            }
            &:hover::after{
                transform: scale(1) ;
                animation: btnRote2 2s infinite ;
            }
        }
    }
    .main-container{
        position: relative; 
        margin-top: 10px ;
        flex: 1 ;
        display: flex ;
        width: 75% ;
        max-width: 75% ;
        flex-direction: column;
        //background-color: green ;
        .article-box{
            position: relative;
            flex: 0 auto ;
            width: 100% ;
            height: 220px ;
            margin-bottom: 50px ;
            padding: 0 ;

            //background: red ; 
            .post-meta{
                position: absolute;
                top: 20px ;
                left: 30px ;
                width: auto;
                margin-bottom: 10px ;
                user-select: none;
                letter-spacing: 1.2px ;
                font-size: 0.7em ;
                font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
                color: #b1b1b1 ;
                a{
                    color: #b1b1b1 ;
                    margin-left: 5px ;
                }
                .post-cate{
                    text-decoration: underline;
                }
                .post-tag{
                    margin-left: 5px ;
                    text-decoration: underline;
                }
            }
            .article-title{
                position: absolute; 
                box-sizing: border-box; 
                padding-left: 20px ;
                padding-right: 20px ;
                top: 40px ;
                left: 20px ;
                height: 40px ;
                width: auto;
                text-align: center;
                line-height: 40px ;
                font-size: 20px ;
                font-weight: bold;
                letter-spacing: 1.3px ;
                text-shadow: 1px 1px 2px  rgba(0, 0, 0, 0.1) ;
                z-index: 1 ;
                font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
                color: rgba(99,187,208,0.9) ;
                cursor: pointer;
                z-index: 1 ;
                background: rgba(15,20,35,1.0) ;
                border-radius: 8px ;
                border: 1px solid rgba(85, 239, 196,1.0) ;
                &:hover{
                    transition: 0.5s ;
                    color: #ffffff;
                    -webkit-animation: Glow_blue 1.5s ease infinite alternate;
                    animation: Glow_blue 1.5s ease infinite alternate;
                }
                
            }
            .box-background{
                position: absolute ;
                height: 70% ;
                width: 100% ;
                bottom: 0 ;
                /* -webkit-box-shadow: 0px 5px 5px #747d8c;
                box-shadow: 0px 5px 5px #747d8c; */
            }
            .box-main{
                position: absolute ;
                height: 70% ;
                width: 100% ;
                bottom: 0px ;
                background-color: rgba(15,20,35,1.0) ;
                border-radius: 10px ;
                border: 1px solid rgba(85, 239, 196,1.0) ;
                &::before{
                    content:"";
                    position: absolute;
                    display: block;
                    width: 380px ;
                    height: 100%;
                    right: 50% ;
                    margin-right: -190px ;
                    top: -90px ;
                    //background: url("../img/bg-zero-1.png") no-repeat;
                    z-index: -1 ;
                }
                &::after{
                    content:"";
                    position: absolute;
                    display: block;
                    width: 800px ;
                    height: 40px ;
                    right: 50% ;
                    margin-right: -400px ;
                    bottom: -20px ;
                    //background: url("../img/bg-zero-2.png") no-repeat;
                    z-index: -1 ;
                }
                p{
                    text-indent: 2em;
                    font-size: 14px;
                    letter-spacing: 1.3px ;
                    line-height: 1.7em;
                    text-shadow: 1px 1px 1px rgba(0,0,0,.04);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    position: absolute;
                    right: 50px ;
                    left: 90px ;
                    bottom: 10px ;
                    top: 20px ;
                    font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
                    color: rgba(129, 236, 236,0.3);
                }
            }
            &:hover {
                .article-title {
                    transition: 0.5s ;
                    color: #ffffff;
                    -webkit-animation: Glow_blue 1.5s ease infinite alternate;
                    animation: Glow_blue 1.5s ease infinite alternate;
                }
            }
        }
        .article-footer {
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100% ;
            height: auto;
            margin-top: 30px ;
            padding: 0 20px ;
            box-sizing: border-box;
            a {
                position: relative;
                text-decoration: none;
                color: rgba(81,196,211,1.0);
                letter-spacing: 1.5px;
            }
            .bottom-page-item {
                position: relative;
                display: inline-block;
                //transition-duration: 0.5s ;
                &::before {
                    content: "";
                    position: absolute;
                    width: 110%;
                    height: 1px ;
                    background-color: #FA8BFF;
                    background-image: linear-gradient(202deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
                    left: -5% ;
                    bottom: 0 ;
                    z-index: 1;
                    transform: scale(0);
                    transition-duration: 0.3s ;
                    animation-name: item-hover-1;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    animation-play-state: running;
                    animation-direction: alternate;
                }
                &::after {
                    content: "";
                    position: absolute;
                    width: 110%;
                    height: 1px ;
                    background-color: #FA8BFF;
                    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
                    right: -5% ;
                    bottom: 70% ;
                    transform: rotateZ(-15deg);
                    transition-duration: 0.3s ;
                    z-index: -1 ;
                    animation-name: item-hover-2;
                    animation-duration: 1s;
                    animation-iteration-count: infinite;
                    animation-timing-function: linear;
                    animation-play-state: running;
                    animation-direction: alternate;
                }
                @keyframes item-hover-1 {
                    0% {
                        bottom: 0 ;
                    }
                    100% {
                        bottom: 110% ;
                        z-index: -1 ;
                    }
                }
                @keyframes item-hover-2 {
                    0% {
                        bottom: 80% ;
                    }
                    100% {
                        bottom: 0% ;
                        z-index: 1 ;
                    }
                }
                &:hover {
                    a {
                        span {
                            color: #ffffff;
                        }
                    }
                    filter: drop-shadow(5px 5px 10px rgba(34,162,195,1.0));
                }
                &:hover::before {
                    transform: scale(1);
                }
            }
            .bottom-page-jump-list {
                position: relative;
                list-style: none;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
                align-items: center;
                width: auto;
                height: auto;
                flex:1 ;
                .bottom-page-jump {
                    position: relative;
                    box-sizing: border-box;
                    width: 20px ;
                    height: 20px ;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    padding: 0 ;
                    &::before {
                        content: "";
                        position: absolute;
                        width: 120% ;
                        height: 120%;
                        left: -10%;
                        top:-10% ;
                        border: solid 1px rgba(210,118,163,1.0);
                        transition-duration: 0.2s ;
                        box-sizing: border-box;
                        transform: scale(0) ;
                    }
                    &:hover {
                        color: #ffffff ;
                        filter: drop-shadow(5px 5px 10px rgba(102,193,140,1.0));
                    }
                    &:hover::before {
                        transform: scale(1) ;
                    }
                }
                .page-jump-hover {
                    position: relative;
                    color: #f8f8f2;
                    &::before {
                        content: "";
                        position: absolute;
                        width: 120% ;
                        height: 120%;
                        left: -10%;
                        top:-10% ;
                        border: solid 1px #ffffff;
                        box-shadow: 0 0 15px rgba(254,215,26,0.3);
                        transition-duration: 0.2s ;
                        box-sizing: border-box;
                        transform: scale(1) ;
                    }
                }
            }
        }

    }
}
